<template>
  <div class="goods-list">
    <div ref="mescroll" class="mescroll">
      <tab class="list-tab" 
          custom-bar-width="1.7rem"
          bar-active-color="#43A047"
          >
        <tab-item :selected="status == 0" @on-item-click="onItemClick">全部</tab-item>
        <tab-item :selected="status == 1" @on-item-click="onItemClick">待发货</tab-item>
        <tab-item :selected="status == 2" @on-item-click="onItemClick">已发货</tab-item>
      </tab>
      <div class="list">
        <div class="item" v-for="(item, index) in order_list" :key="index" @click="router({path: './orderDetails', query:{order_id: item.id}})">
          <div class="top">
            <p class="time">{{item.create_time | formatDate}}</p>
            <p class="status" v-show="item.buied_status == 1">待发货</p>
            <p class="status done" v-show="item.buied_status == 2">已发货</p>
          </div>
          <div class="goods" v-for="(goods, goods_index) in item.order_items" :key="goods_index">
            <div class="img">
              <img :src="goods.img">
            </div>
            <div class="title">
              <p class="tip">{{goods.title}}</p>
              <p class="attr">规格： {{goods.guige}}</p>
              <p class="price">¥{{goods.price}} <span class="num">x{{goods.num}}</span></p>
            </div>
          </div>
          <p class="all-price">总计金额: ￥{{item.total_price}}</p>
        </div>
      </div>        
      <div class="none" v-show="noDate">
        <img src="@/assets/kongzhuangtai.png" alt="">
        <p>暂无结果</p>
      </div> 
    </div>
  </div>
</template>

<script>

  import { Tab, TabItem } from 'vux'
  import MeScroll from 'mescroll.js'
  import 'mescroll.js/mescroll.min.css'
  import { getOrderList } from '@/api/api'
  import { formatDate } from '@/util/date'
  export default {
    components: {
      Tab,
      TabItem,
    },
    filters: {
      formatDate(time) {
        if(!time){return;}
        let date = new Date(time*1000);
        return formatDate(date, 'yyyy年MM月dd日 hh:mm');
      }
    },
    data () {
      return {
        is_check: true,
        uid: '',
        status: 0,
        noDate: false,
        order_list: [],
      }
    },
    created () {
      this.status = this.$route.query.tab_index;
      this.uid = sessionStorage.getItem('uid');
    },
    mounted () {
      this.mescroll = new MeScroll(this.$refs.mescroll, { 
        up: {
          callback: this.upCallback
        }
      })
    },
    methods: {
      router (path) {
        this.$router.push(path)
      },
      onItemClick (index) {
        this.tab_index = index;
        this.order_list = [];
        this.status = index;
        this.mescroll.resetUpScroll()
      },
      upCallback (page) {      
        getOrderList(this.uid, this.status, page.num, page.size).then((res) => {
          if (page.num == 1){
            this.order_list = []
          }
          this.$nextTick(() => {
            this.mescroll.endSuccess(res.data.info);
          })
          this.order_list = this.order_list.concat(res.data.info)
          if(this.order_list.length == "0"){
            this.noDate = true;
          }
        }).catch((err) => {
          console.dir(err)
          this.mescroll.endErr()
        })
      },
    }
  }
</script>

<style lang="stylus" scoped>
.goods-list
  width 100%
  min-height 100vh
  overflow hidden
  .mescroll
    position fixed
    top 0
    bottom 0
    height auto
    background-color #f5f5f5
  .list-tab
    padding-top 5rem
    margin-bottom 1rem
    .vux-tab-container
      height 5rem
      .vux-tab-item.vux-tab-selected
        color #43A047
      .vux-tab-item
        color #999
        font-size 1.6rem
        font-weight 500
  .item
    background-color #fff
    position relative
    margin-bottom 1rem
    padding 0 1.5rem
    .bolang
      position absolute
      width 100%
      bottom -.3rem
      left 0
    .top
      line-height 4.5rem
      overflow hidden
      border-bottom 1px solid #e6e6e6
      .time
        float left
        color #999
        font-size 1.5rem
      .status
        float right
        color #43A047
        font-size 1.5rem
      .done
        color #999
    .goods
      display flex
      background-color #fff
      padding 1rem 0
      border-bottom 1px solid #e6e6e6
      .img
        width 12rem
        height 12rem
        margin-right 1.4rem
        img
          height 12rem
          object-fit cover
      .title
        position relative
        .tip
          font-size 1.5rem
          color #333
          width calc(100vw - 17rem)
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          -webkit-line-clamp 2
          -webkit-box-orient vertical
        .attr
          margin-top 1rem
          color #999
          font-size 1.2rem
        .price
          color #666
          font-size 1.7rem
          line-height 2.4rem
          position absolute
          bottom 0
          font-weight bold
          overflow hidden
          width 100%
          span
            float right
            line-height 2.4rem
      .num
        flex 1
        text-align right
        line-height 2.1rem
        font-size 1.5rem
        font-weight 500
    .all-price
      line-height 5rem
      height 5rem
      color #333
      font-size 1.5rem
  .none
    img
      width 21.5rem
      position relative
      left 50%
      margin-left -10.75rem
      padding-top 11.6rem
    p
      color #999
      font-size 1.2rem
      text-align center
      margin-top 4rem
</style>
